<!-- 运营-政策 -->
<template>
	<view class="policy-layout">
		<!-- 选择政策 -->
		<view class="select-policy-box" @tap="showSelectPolicy">
			<text>{{selectPolicy ? selectPolicy.policyName : ''}}</text>
			<xh-icon icon="icon_shanglajiantou" size="28rpx"></xh-icon>
		</view>
		<!-- 金额数据统计 -->
		<view class="st-box">
			<!-- 近30天台均 -->
			<view class="tj tj-days-30">
				<text class="tj-title">近30天台均金额</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{selectPolicy ? selectPolicy.transAmount : '0' }}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>上月台均</text>
					<text class="tj-count-text">{{selectPolicy ? selectPolicy.lastTransAmount : '0' }}</text>
					<text>元</text>
				</view>
				<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" @tap="showRole({title:'台均'})"></image>
			</view>
			<uv-gap height="30rpx"></uv-gap>
			<!-- 今日交易 -->
			<view class="tj tj-days-today">
				<text class="tj-title">今日总交易(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{dataInfo.daysTransAmount}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>笔数</text>
					<text class="tj-count-text">{{dataInfo.daysTransNum}}</text>
					<text>笔</text>
				</view>
				<view class="tj-count-box">
					<text>昨日</text>
					<text class="tj-count-text">{{dataInfo.lastDaysTransAmount}}</text>
					<text>元</text>
					<text class="tj-count-text-2">笔数</text>
					<text class="tj-count-text">{{dataInfo.lastDaysTransNum}}</text>
					<text>笔</text>
				</view>
			</view>
			<uv-gap height="30rpx"></uv-gap>
			<!-- 本月交易 -->
			<view class="tj tj-month">
				<text class="tj-title">本月总交易(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{dataInfo.monthsTransAmount}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>笔数</text>
					<text class="tj-count-text">{{dataInfo.monthsTransNum}}</text>
					<text>笔</text>
				</view>
				<view class="tj-count-box">
					<text>上月交易</text>
					<text class="tj-count-text">{{dataInfo.lastMonthsTransAmount}}</text>
					<text>元</text>
					<text class="tj-count-text-2">笔数</text>
					<text class="tj-count-text">{{dataInfo.lastMonthsTransNum}}</text>
					<text>笔</text>
				</view>
			</view>
		</view>
		<!-- 机具数据 -->
		<view>
			<view class="title-box">
				<text>机具数据</text>
			</view>
			<view class="grid-box">
				<view class="device-item" :class="[index == 0 ? 'device-item-0' : '',item.bgClassName]" v-for="(item,index) in deviceList" :key="item.title">
					<text>{{item.title}}</text>
					<view class="device-count">
						<text class="device-count-text">{{item.count}}</text>
						<text>{{item.unit}}</text>
					</view>
					<text>{{item.subTitle}}</text>
					<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" v-if="item.isLook" @tap="showRole(item)"></image>
				</view>
			</view>
		</view>
		<!-- 商户数据 -->
		<view>
			<view class="title-box">
				<text>商户数据</text>
			</view>
			<view class="grid-box">
				<view class="device-item" :class="[index == 0 ? 'device-item-0' : '',item.bgClassName]" v-for="(item,index) in merchantList" :key="item.title">
					<text>{{item.title}}</text>
					<view class="device-count">
						<text class="device-count-text">{{item.count}}</text>
						<text>{{item.unit}}</text>
					</view>
					<text>{{item.subTitle}}</text>
					<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" v-if="item.isLook" @tap="showRole(item)"></image>
				</view>
			</view>
		</view>
		<xh-role-pop ref="roleRef"></xh-role-pop>
		<xh-ploicy-pop ref="policyRef" @select="selectResult"></xh-ploicy-pop>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getPolicyTrade, getPolicyReport, getFilterPolicyList } from '@/common/api/api.js'
	import XhPloicyPop from '@/pages/operate/widget/xh-policy/xh-ploicy-pop.vue'
	const props = defineProps(['policyId'])
	const roleRef = ref(null)
	const policyRef = ref(null)
	//政策列表
	const policyList = ref([])
	// 选择的政策
	const selectPolicy = ref(null)
	// 机具统计数据
	const deviceList = ref([{
			title: '机具数',
			unit: '台',
			count: 0,
			subTitle: '直营率0%',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-big'
		},
		{
			title: '有效绑定数',
			unit: '台',
			count: 0,
			subTitle: '绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '总激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '直营绑定数',
			unit: '台',
			count: 0,
			subTitle: '直营绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '直营激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '今日绑定',
			unit: '台',
			count: 0,
			subTitle: '昨日绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '今日激活',
			unit: '台',
			count: 0,
			subTitle: '昨日激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '本月绑定',
			unit: '台',
			count: 0,
			subTitle: '上月绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '本月激活',
			unit: '台',
			count: 0,
			subTitle: '上月激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		}
	])
	// 商户统计数据
	const merchantList = ref([{
			title: '商户数',
			unit: '人',
			count: 0,
			subTitle: '本月新增0人',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName: 'device-item-bg-green-big'
		},
		{
			title: '近30天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-green-small'
		},
		{
			title: '近60天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-green-small'
		}
	])
	// 交易数据
	const dataInfo = ref({
		daysTransNum: 0,
		daysTransAmount: 0,
		lastDaysTransNum: 0,
		lastDaysTransAmount: 0,
		monthsTransNum: 0,
		monthsTransAmount: 0,
		lastMonthsTransNum: 0,
		lastMonthsTransAmount: 0
	})
	//选择政策
	const showSelectPolicy = () => {
		if(policyList.value.length == 0){
			return
		}
		policyRef.value.show(policyList.value)
	}
	// 政策选择结果
	const selectResult = (res) => {
		selectPolicy.value = res
		getPolicyTradeInfo()
		getPolicyReportInfo()
	}
	//查看说明
	const showRole = (item) => {
		if (item.title == '机具数') {
			roleRef.value.show({ title: '直营率说明', content: '评估代理直营的指标数，计算方式为：未划拨机具数/总接收机具数' })
		} else if (item.title == '商户数') {
			roleRef.value.show({ title: '商户活跃说明', content: '评估代理展业商户健康指数，活跃率计算方式为：近X天内有交易的商户数/总商户数（不包含服务费）' })
		} else {
			roleRef.value.show({ title: '台均说明', content: '评估代理展业政策健康指数，计算方式为：近30天总交易金额/已绑定机具数（不包含服务费）' })
		}
	}
	// 获取政策列表数据
	const getFilterPolicyListData = async () => {
		const res = await getFilterPolicyList()
		policyList.value = res.result
		if (policyList.value.length > 0) {
			if(uni.$uv.test.empty(props.policyId)){
				selectPolicy.value = policyList.value[0]
			}
			else{
				policyList.value.forEach(item=>{
					if(item.policyId == props.policyId){
						selectPolicy.value = item
					}
				})
			}
			getPolicyTradeInfo()
			getPolicyReportInfo()
		}
		
	}
	// 获取交易数据
	const getPolicyTradeInfo = async () => {
		let params = {}
		if(selectPolicy.value){
			params.policyId = selectPolicy.value.policyId
		}
		const res = await getPolicyTrade(params)
		dataInfo.value = res.result
	}
	// 获取机具数据
	const getPolicyReportInfo = async () => {
		let params = {}
		if(selectPolicy.value){
			params.policyId = selectPolicy.value.policyId
		}
		const res = await getPolicyReport(params)
		const data = res.result
		deviceList.value.forEach(item=>{
			if(item.title == '机具数'){
				item.count = data.deviceAllNum
				item.subTitle = `直营率${data.deviceDirectScale}%`
			}
			else if(item.title == '有效绑定数'){
				item.count = data.deviceBindAllNum
				item.subTitle = `绑定率${data.deviceBindScale}%`
			}
			else if(item.title == '总激活数'){
				item.count = data.deviceAllActiveNum
				item.subTitle = `激活率${data.deviceAcitveScale}%`
			}
			else if(item.title == '直营绑定数'){
				item.count = data.deviceDirectBindNum
				item.subTitle = `直营绑定率${data.deviceDirectBindScale}%`
			}
			else if(item.title == '直营激活数'){
				item.count = data.deviceActiveNum
				item.subTitle = `直营激活率${data.deviceActiveDirectScale}%`
			}
			else if(item.title == '今日绑定'){
				item.count = data.bindTodayNum
				item.subTitle = `昨日绑定${data.bindYesterdayNum}台`
			}
			else if(item.title == '今日激活'){
				item.count = data.activeTodayNum
				item.subTitle = `昨日激活${data.activeYesterdayNum}台`
			}
			else if(item.title == '本月绑定'){
				item.count = data.deviceBindThisMonthNum
				item.subTitle = `上月绑定${data.deviceBindLastMonthNum}台`
			}
			else if(item.title == '本月激活'){
				item.count = data.deviceActiveThisMonthNum
				item.subTitle = `上月激活${data.deviceActiveLastMonthNum}台`
			}
		})
		merchantList.value.forEach(item=>{
			if(item.title == '商户数'){
				item.count = data.merchantAllNum
				item.subTitle = `本月新增${data.merchantThisMonthNum}人`
			}
			else if(item.title == '近30天交易商户数'){
				item.count = data.transMerchantNumNew
				item.subTitle = `活跃率${data.merchantActiveScaleNew}%`
			}
			else if(item.title == '近60天交易商户数'){
				item.count = data.transMerchantNum
				item.subTitle = `活跃率${data.merchantActiveScale}%`
			}
		})
	}
	// 刷新数据
	const reloadData = ()=>{
		getFilterPolicyListData()
	}
	defineExpose({
		reloadData
	})
	onMounted(() => {
		console.log('组件挂载')
		console.log('当前政策ID：',props.policyId)
		reloadData()
	})
</script>

<style lang="scss" scoped>
	.policy-layout {
		padding: 0 30rpx 30rpx;

		.what-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 28rpx;
			height: 28rpx;
		}

		.select-policy-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 88rpx;
			color: $xh-color-3;
			font-size: 28rpx;
			border-radius: 16rpx;
			border: 1px solid $xh-line-color;
			margin-bottom: 30rpx;
		}

		.st-box {
			.tj {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: white;
				padding: 30rpx 0;
				font-size: 32rpx;
				position: relative;

				.tj-money-box {
					color: white;
					font-size: 24rpx;
					margin-top: 10rpx;

					.tj-money-text {
						font-size: 50rpx;
						margin-right: 3px;
					}
				}

				.tj-count-box {
					margin-top: 10rpx;
					color: white;
					font-size: 24rpx;

					.tj-count-text {
						font-size: 30rpx;
						margin: 0 10rpx;
					}

					.tj-count-text-2 {
						margin-left: 20rpx;
					}
				}
			}

			.tj-days-30 {
				background-image: url('/static/operate/yy_sy_bg@2x.png');
			}

			.tj-days-today {
				background-image: url('/static/operate/yy_jrjy_bg@2x.png');
			}

			.tj-month {
				background-image: url('/static/operate/yy_byjy_bg@2x.png');
			}
		}

		.title-box {
			padding: 30rpx 0;
			color: $xh-color-3;
			font-size: 28rpx;

		}

		.grid-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.device-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-size: 100% 100%;
				color: #ffffff;
				font-size: 24rpx;
				padding: 16rpx;
				position: relative;

				.device-count {
					display: flex;
					align-items: center;
					color: #ffffff;
					font-size: 24rpx;
					padding: 8rpx 0;

					.device-count-text {
						font-size: 32rpx;
					}
				}
			}

			.device-item-0,
			.device-item-9 {
				grid-column-start: 1;
				grid-column-end: 3;
			}

			.device-item-bg-blue-big {
				background-image: url('/static/operate/yy_jjs_bg_1@2x.png');
			}

			.device-item-bg-blue-small {
				background-image: url('/static/operate/yy_jjzbds_bg_2@2x.png');
			}

			.device-item-bg-red-small {
				background-image: url('/static/operate/yy_jjs_bg_2@2x.png');
			}

			.device-item-bg-green-big {
				background-image: url('/static/operate/yy_shs_bg_1@2x.png');
			}

			.device-item-bg-green-small {
				background-image: url('/static/operate/yy_shs_bg_2@2x.png');
			}
		}
	}
</style>